<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"></tables>
    </Card>
    <Modal
      v-model="noticeModalVisible"
      title="编辑公告"
      @on-cancel="closeNoticeModal">
      <Form :model="currentNoticeItem" label-position="top">
        <!-- 公告图片表单项 -->
        <FormItem label="公告图片">
          <Image
            :src="currentNoticeItem.img"
            width="200px"
            height="200px"
          />
        </FormItem>
        <!-- 标题表单项 -->
        <FormItem label="标题">
          <Input v-model="currentNoticeItem.title" />
        </FormItem>
        <!-- 公告id表单项 -->
        <FormItem label="公告id">
          <Input v-model="currentNoticeItem.id" readonly />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="saveNotice">保存</Button>
        <Button @click="closeNoticeModal">取消</Button>
      </div>
    </Modal>
  </div> 
</template>

<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        { title: '公告图片', key: 'img', sortable: true, render: (h, params) => {
          return h('div', [
            h('img', {
              style: {
                height: '80px'
              },
              attrs: {
                src: params.row.img
              }
            })
          ])
        } },
        { title: '标题', key: 'title', editable: true },
        { title: '公告id', key: 'id' },
        {
          title: 'Handle',
          key: 'handle',
          button: [
            (h, params, vm) => {
              return h('div', [
                h('Button', {
                  props: { type: 'primary', size: 'small' },
                  style: { marginRight: '5px' },
                  on: { click: () => this.handleEdit(params) }
                }, '编辑'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '你确定要删除吗?'
                  },
                  on: {
                    'on-ok': () => {
                      vm.$emit('on-delete', params);
                      vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex));
                    }
                  }
                }, [
                  h('Button', {
                    props: Object.assign({}, vm.buttonProps),
                    props: {
                      type: 'error',
                      size: 'small'
                    }
                  }, '删除')
                ])
              ]);
            }
          ]
        }
      ],
      noticeModalVisible: false,
      currentNoticeItem: {},
      tableData: [
        { img: 'http://example.com/notice1.jpg', title: '公司年度大会通知', id: 'N001' },
        { img: 'http://example.com/notice2.jpg', title: '节假日安排公告', id: 'N002' },
        { img: 'http://example.com/notice3.jpg', title: '新项目启动会议', id: 'N003' },
        { img: 'http://example.com/notice4.jpg', title: '员工培训计划', id: 'N004' },
        { img: 'http://example.com/notice5.jpg', title: '健康安全须知', id: 'N005' },
        { img: 'http://example.com/notice6.jpg', title: '紧急疏散演练', id: 'N006' },
        { img: 'http://example.com/notice7.jpg', title: '员工福利更新', id: 'N007' },
        { img: 'http://example.com/notice8.jpg', title: '团队建设活动', id: 'N008' },
        { img: 'http://example.com/notice9.jpg', title: '财务报销流程变更', id: 'N009' },
        { img: 'http://example.com/notice10.jpg', title: '公司政策更新', id: 'N010' }
      ]
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    handleEdit(params) {
      this.currentNoticeItem = {...params.row};
      this.noticeModalVisible = true;
    },
    handleDelete(params) {
      console.log(params)
    },
    saveNotice() {
      this.noticeModalVisible = false; 
    },
    closeNoticeModal() {
      this.noticeModalVisible = false; 
    }
  },
  mounted () {
    getTableData().then(res => {
      console.log(res)
      // this.tableData = res.data
    })
  }
}
</script>
<style>
</style>
